<template>
	<view class="field_list">
		<view class="ul" v-for="(i,index) in infoList" :key="index">
			<uni-card :title="i.position_name" :sub-title="i.position_address" extra="查看详情"
				:thumbnail="`http://127.0.0.1:8000${i.image_path}`" @click='toDetail(i)'>
				<text>{{i.position_intro}}</text>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoList: []
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 获取战地数据
			getData(e) {
				this.$api.territoryManagement.getAll()
					.then((res) => {
						this.infoList = res;
					})
					.catch((error) => {
						console.error('An error occurred while fetching data:', error);
					});
			},

			// 查看详情
			toDetail(row) {
				let detailInfo = JSON.stringify(row)
				uni.navigateTo({
					url: '../../pages/detail/detail',
					success(res) {
						res.eventChannel.emit("detailInfo", {
							data: detailInfo,
						})
					}
				});
			}
		}
	}
</script>

<style scoped>
	.field_list {
		width: 100%;
		height: 100vh;
		background-image: url('https://gd-hbimg.huaban.com/83d403c28f3298a8dc4653836cd16fdf4f6649186b14f9-AnXh6w_fw240webp');
		background-size: cover;
		display: flex;
		flex-flow: column nowrap;
		overflow: auto;
	}

	.ul {
		width: 95%;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 10px;
		margin: 10px auto 5px;
		box-shadow: 0 0 5px #ccc;
	}

	>>>.uni-card .uni-card__content {
		height: 100px;
	}
</style>